<template>
	<view class="page">
		<view class="header">
			<yzh-Header :title="'卡券管理'" :bgColor="'#609EF2'"></yzh-Header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/xp.jpg"></image>
			<!-- #endif -->
			<view class="hBtn">
				<u-button text="新增优惠券" shape="circle" icon="plus" iconColor="white"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
					@click="addAccount"></u-button>
			</view>
		</view>
		<view class="body">
			<uni-card>
				<view class="sub">
					<u-subsection mode="subsection" :list="sub" :current="current" @change="subChange"></u-subsection>
					<view class="ticketList" v-for="(item,index) in formattedAccountList" key="index"
						v-if="current==0 && item.use==1">
						<view v-if="item.type==1" class="left">
							<view>满{{item.man}}元可用</view>
							<view class="money">
								<view>¥</view>
								<view>{{item.jian}}</view>
							</view>
						</view>
						<view v-if="item.type==2" class="left">
							<view>打折券</view>
							<view class="money">
								<view></view>
								<view>{{item.zhe}}</view>
								<view>折</view>
							</view>
						</view>
						<view class="right">
							<view>{{item.name}}</view>
							<view>有效期：{{item.dateRange}}</view>
							<view>每人限领{{item.limit}}张</view>
						</view>
					</view>
					<view class="ticketList" v-for="(item,index) in formattedAccountList" key="index"
						v-if="current==1 && item.use==2">
						<view v-if="item.type==1" class="left-no">
							<view>满{{item.man}}元可用</view>
							<view class="money">
								<view>¥</view>
								<view>{{item.jian}}</view>
							</view>
						</view>
						<view v-if="item.type==2" class="left-no">
							<view>打折券</view>
							<view class="money">
								<view></view>
								<view>{{item.zhe}}</view>
								<view>折</view>
							</view>
						</view>
						<view class="right-no">
							<view>{{item.name}}</view>
							<view>有效期：{{item.dateRange}}</view>
							<view>每人限领{{item.limit}}张
								<image v-if="current==1" src="@/static/yzh/end.png"></image>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";
	export default {
		components: {
			"yzh-Header": Header
		},
		data() {
			return {
				sub: ["进行中", "已结束"],
				current: 0,
				startDate: new Date(), // 假设这是开始日期
				endDate: new Date(new Date().setDate(new Date().getDate() + 7)), // 结束日期为今天之后的一周
				accountList: [{
					name: "新用户专享体验券",
					startTime: new Date(),
					endTime: new Date(new Date().setDate(new Date().getDate() + 7)),
					man: 200,
					jian: 10,
					zhe: 100,
					limit: 1,
					type: 1,
					use: 1,
					dateRange: ""
				}, {
					name: "新用户专享体验券1",
					startTime: new Date(),
					endTime: new Date(new Date().setDate(new Date().getDate() + 7)),
					man: 0,
					jian: 0,
					zhe: 95,
					limit: 1,
					type: 2,
					use: 1,
					dateRange: ""
				}, {
					name: "过期的新用户专享体验券",
					startTime: new Date(),
					endTime: new Date(new Date().setDate(new Date().getDate() + 7)),
					man: 0,
					jian: 0,
					zhe: 95,
					limit: 1,
					type: 2,
					use: 2,
					dateRange: ""
				}, {
					name: "过期的新用户专享体验券2",
					startTime: new Date(),
					endTime: new Date(new Date().setDate(new Date().getDate() + 7)),
					man: 200,
					jian: 10,
					zhe: 100,
					limit: 1,
					type: 1,
					use: 2,
					dateRange: ""
				}]
			}
		},
		methods: {
			subChange(index) {
				this.current = index;
			},
			addAccount() {
				uni.navigateTo({
					url: "/pages/yzh/account/accountS"
				})
			},
			formatDate(date) {
				const d = new Date(date);
				return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
			}

		},
		computed: {
			formattedAccountList() {
				return this.accountList.map(item => ({
					...item,
					dateRange: `${this.formatDate(item.startTime)} 至 ${this.formatDate(item.endTime)}`
				}));
			}
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/xp.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 500rpx;
		position: absolute;
		z-index: -1;
	}

	.header>.hBtn {
		position: absolute;
		align-items: center;
		text-align: center;
		left: 10%;
		width: 80%;
		top: 15%;
		z-index: 999;
	}

	.body {
		position: relative;
		margin-top: 50%;
	}

	.sub {
		min-height: 800rpx;
	}

	.ticketList {
		display: flex;
		height: 200rpx;
		margin-top: 40rpx;

	}

	.ticketList>.left {
		background-color: #FF8A62;
		color: white;
		width: 35%;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.ticketList>.left-no {
		background-color: #FFBB99;
		color: white;
		width: 35%;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.ticketList>.left>.money,
	.ticketList>.left-no>.money {
		display: flex;
		text-align: center;
		justify-content: space-around;
		/* border: 2rpx solid red; */
		margin-top: 40rpx;

	}

	.ticketList>.left>.money :nth-child(2),
	.ticketList>.left-no>.money :nth-child(2) {
		font-weight: bold;
		font-size: 96rpx;
	}

	.ticketList>.right {
		background-color: #FFF3EB;
		width: 65%;
		padding: 20rpx;
		box-sizing: border-box;
		color: black;
		border-radius: 0 20rpx 20rpx 0;
	}

	.ticketList>.right-no {
		background-color: rgba(255, 243, 235, 0.7);
		width: 65%;
		padding: 20rpx;
		box-sizing: border-box;
		color: black;
		border-radius: 0 20rpx 20rpx 0;
	}

	.ticketList>.right :nth-child(1) {
		font-weight: 550;
		font-size: 26rpx;
	}

	.ticketList>.right-no :nth-child(1) {
		font-weight: 550;
		font-size: 26rpx;
		color: #9A9A9A;
	}

	.ticketList>.right :nth-child(2) {
		font-size: 22rpx;
	}

	.ticketList>.right-no :nth-child(2) {
		font-size: 22rpx;
		color: #9A9A9A;
	}

	.ticketList>.right :nth-child(3) {
		margin-top: 20rpx;
		font-size: 22rpx;
	}

	.ticketList>.right-no :nth-child(3) {
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #9A9A9A;
		height: 60rpx;
	}

	.ticketList>.right-no :nth-child(3)>image {
		width: 110rpx;
		height: 70rpx;
		margin-left: 240rpx;
		margin-top: -700rpx
	}
</style>